{% extends "base.html" %}
{% block title %}
    {{ question.title }}
{% endblock title %}
{% block header %}
{% endblock header %}
{% block body %}
    <div class="row mt-4">
        <div class="col"></div>
        <div class="col-8"
             style="background-color: #fff;
                    text-align:center;
                    opacity:0.8;">
            <h4>{{ question.title }}</h4>
            <p>发布时间：{{ question.create_time }} 作者：{{ question.author.username }}</p>
            <p style="text-align: left;">&nbsp;&nbsp;{{ question.content }}</p>
            <h5 style="text-align: left;">回答({{ question.answers|length }})</h5>
            <form action="{{ url_for('qa.answer',question_id=question.id)}}"
                  method="post">
                <div class="form-group">
                    <textarea name="content"
                              placeholder="请输入内容"
                              rows="2"
                              name="content"
                              class="form-control"></textarea>
                </div>
                {% for message in get_flashed_messages() %}
                    <div class="form-group">
                        <div class="text-danger">{{ message }}</div>
                    </div>
                {% endfor %}
                <div class="form-group" style="text-align: right;">
                    <button class="btn btn-primary">回复</button>
                </div>
            </form>
            <div style="text-align: left;">
                {% for answer in question.answers %}
                    <h5>
                        <div style="width:50%;text-align:left;float:left">{{ answer.author.username }}</div>
                        <div style="width:50%;text-align:right;float:right">评论时间：{{ answer.create_time }}</div>
                    </h5>
                    <p>&nbsp;&nbsp;{{ answer.content }}</p>
                    <HR align=center width=100% color=#987cb9 SIZE=1>
                {% endfor %}
            </div>
        </div>
        <div class="col"></div>
    </div>
{% endblock body %}
